<!DOCTYPE html>
<html>

	<head>
		<meta name='keywords' content='iogame,spells,wizard,io game,html game,online game,wiziz,sorcery,multiplayer game'>
		<meta name='description' content='Cast spells to destroy your enemies, level up to unlock new spells, and fight your way to the #1 spot!'>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
		<title>Wiziz</title>
		<style>
			@font-face {
				font-family: 'newrocker';
				src: url("/fonts/newRocker/newrocker-webfont.woff2") format('woff2'), url("/fonts/newRocker/newrocker-webfont.woff") format('woff');
				font-weight: normal;
				font-style: normal;
			}

			@font-face {
				font-family: 'agane';
				src: url("/fonts/agane/agane-webfont.woff2") format('woff2'), url("/fonts/agane/agane-webfont.woff") format('woff');
				font-weight: normal;
				font-style: normal;
			}

			* {
				font-family: agane;
			}

			body, #mainScreen {
				background-image: url("media/images/backgroundImage.svg");
			}

			button {
				cursor: pointer;
			}

			#game,
			#game * {
				user-drag: none;
				user-select: none;
				-moz-user-select: none;
				-webkit-user-drag: none;
				-webkit-user-select: none;
				-ms-user-select: none;
			}

			body,
			html {
				margin: 0;
				padding: 0;
				overflow: hidden;
			}

			#gameCanvas {
				z-index: -2;
				position: absolute;
				top: 0;
				left: 0;
				transform-origin: top left;
			}

			#inventory {
				box-sizing: border-box;
				background-color: #BBBBBB;
				height: 120px;
				position: absolute;
				bottom: -16px;
				border-radius: 10px;
				border: 10px solid #3a8fee;
				overflow: hidden;
				justify-content: center;
				text-align: center;
				left: 50%;
				transform: translateX(-50%) scale(0.7);
			}

			.inventorySlot, .selectionOutline {
				position: relative;
				cursor: pointer;
			}

			#mainScreen {
				background-color: rgb(227, 227, 227);
				z-index: 10;
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				height: 100vh;
				animation-fill-mode: forwards;
				animation-timing-function: ease-in;
				animation-duration: 1500ms;
			}

			@keyframes death {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}

			.coolDownDisplay {
				display: inline-block;
				border-radius: 6px 6px 0 0;
				width: 94px;
				position: absolute;
				margin: 2.5px;
				z-index: 1 !important;
				animation-fill-mode: forwards;
				animation-timing-function: linear;
				animation-name: coolDown;
				cursor: pointer;
				background-color: rgba(0, 0, 0, 0.5);
			}

			@keyframes coolDown {
				from {
					height: 94px;
				}
				to {
					height: 0;
				}
			}

			#outerHealth {
				height: 30px;
				margin: 0 auto;
				position: absolute;
				bottom: 86px;
				left: calc(50vw - (416px / 2));
				width: 416px;
				border-radius: 5px;
				background-color: rgba(40, 41, 41, 0.7);
				transform: scale(0.85);
			}

			#health {
				width: calc(100% - 8px);
				height: calc(100% - 8px);
				position: absolute;
				top: 50%;
				left: 4px;
				transform: translateY(-50%);
				border-radius: 7px;
				background-color: rgba(236, 236, 236, 0.8);
			}

			#outerXp {
				height: 16px;
				margin: 0 auto;
				position: absolute;
				bottom: 115px;
				left: calc(50vw - (416px / 2));
				width: 416px;
				border-radius: 3px;
				background-color: rgba(40, 41, 41, 0.7);
				transform: scale(0.85);
			}

			#xp {
				width: 0;
				height: calc(100% - 8px);
				position: absolute;
				top: 50%;
				left: 4px;
				transform: translateY(-50%);
				border-radius: 3px;
				background-color: rgba(63, 214, 44, 0.8);
			}

			#healthIcon {
				position: relative;
				top: 2px;
			}

			#chooseUnlockedSpellsWrapper {
				display: none;
				text-align: center;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}

			#chooseUnlockedSpells img {
				margin: 2.5px;
				cursor: pointer;
			}

			#chooseUnlockedSpells {
				border-radius: 10px;
				display: inline-block;
				border: 10px solid #3a8fee;
				background-color: #BBBBBB;
			}

			#newSpellsCaption {
				font-size: 300%;
			}

			#newSpellsSubcaption {
				font-size: 200%;
			}

			#storageWrapper {
				display: none;
				position: absolute;
				text-align: center;
				left: 50%;
				top: 20vh;
				transform: translateX(-50%);
			}

			#storage {
				border-radius: 10px;
				border: 10px solid #3a8fee;
				overflow-y: auto;
				display: inline-block;
				height: 206px;
				background-color: #BBBBBB;
			}

			.storageSlot {
				margin: 2.5px;
				cursor: pointer;
			}

			#leaderboard {
				display: inline-block;
				background-color: rgba(187, 187, 187, 0.75);
				padding: 8px;
				position: absolute;
				right: 4px;
				border-radius: 4px;
				top: 4px;
			}

			#leadersList li {
				list-style-type: none;
			}

			#leadersList {
				padding: 0;
			}

			kbd {
				background-color: #EBF1F5;
				border: 2px solid #cbcfd2;
				border-radius: 3px;
				color: #726C74;
				display: inline-block;
				font-size: 11px;
				line-height: 1.4;
				margin: 0 .1em;
				padding: .1em .6em;
			}

			#leaderboardHeader {
				text-align: center;
				color: #2f086f;
				font-size: 140%;
				font-family: newrocker;
				margin: 0;
			}

			.playerLi {
				padding: 0 1ch;
				display: block;
			}

			.nickname {
				padding: 0 1ch;
			}

			.self {
				border-radius: 5px;
				background-color: rgba(39, 177, 16, 0.6);
			}

			.nickname,
			.place,
			.score {
				font-family: newrocker;
			}

			#loading {
				width: 100vw;
				height: 100vh;
				background-color: #e3e3e3;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 20;
			}

			#loaderText {
				font-family: newrocker;
				color: #2f086f;
				text-align: center;
				width: 100vw;
				font-size: 400%;
				position: absolute;
				top: 40vh;
			}

			#loaderText::after {
				content: '';
				animation-duration: 1.3s;
				animation-iteration-count: infinite;
				animation-name: loader;
			}

			@keyframes loader {
				30% {
					content: '.';
				}
				60% {
					content: '..';
				}
				90% {
					content: '...';
				}
			}

			#nicknameInput {
				display: block;
				margin: 0 auto 0.9em;
				font-size: 120%;
				padding: 8px 0;
				text-align: center;
				border: none;
				background-color: #bdbdbd;
				border-radius: 2px;
				color: #404141;
			}

			#nicknameInput::placeholder {
				color: #524e4e;
				text-align: center;
				opacity: 1;
			}

			#playButton {
				background-color: #800080;
				color: #ffffff;
				border: none;
				font-family: agane;
				border-radius: 10px;
				padding: 3px 1.1em;
				font-size: 46px;
				display: block;
				margin: 0 auto 18px;
				box-shadow: 0 10px #5f005f;
				width: 100%;
			}

			#playButton:active {
				position: relative;
				top: 10px;
				box-shadow: none;
			}

			button::-moz-focus-inner {
				padding: 0;
				border: 0;
			}

			#mainPane {
				position: absolute;
				width: 100%;
				top: 45vh;
				text-align: center;
				transform: translateY(-50%);
			}

			header h1 {
				position: absolute;
				text-align: center;
				width: 100vw;
				font-family: newrocker;
				font-size: 500%;
				color: #2f086f;
			}

			footer {
				color: #4e4e4e;
				position: absolute;
				text-align: right;
				width: 100%;
				bottom: 0;
			}

			footer span {
				font-size: 80%;
				color: black;
				position: absolute;
				left: 0;
				margin-right: 8px;
			}

			footer a {
				font-size: 80%;
				margin: 0 6px;
				text-decoration: none;
				font-weight: bold;
				padding: 0 4px;
				border-left: 2px solid #4e4e4e;
				border-right: 2px solid #4e4e4e;
				color: #4e4e4e;
			}

			#redditLink {
				background-image: url("/media/images/redditIcon.png");
				box-shadow: 0 5px #d04613;
			}

			#githubLink {
				background-image: url("/media/images/githubIcon.png");
				background-color: #C7BABA;
				box-shadow: 0 5px #958A8A;
			}

			.socialLink {
				display: inline-block;
				width: 32px;
				height: 32px;
				border-radius: 6px;
			}

			.socialLink:active {
				position: relative;
				top: 6px;
				box-shadow: none !important;
			}

			#mainBlock {
				display: inline-block;
				border: 4px solid #4b4b4b;
				padding: 0.6em;
				text-align: left;
				background-color: rgba(107, 107, 107, 0.9);
				border-radius: 5px;
			}

			#tutorial {
				display: inline-block;
				background-color: #800080;
				color: #ffffff;
				border: none;
				font-family: agane;
				border-radius: 6px;
				padding: 3px 1.1em;
				box-shadow: 0 6px #5f005f;
			}

			.popButton {
				cursor: pointer;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			#tutorial:active {
				position: relative;
				top: 6px;
				box-shadow: none;
			}

			#settings {
				display: inline-block;
				background-color: #800080;
				color: #ffffff;
				border: none;
				font-family: agane;
				border-radius: 6px;
				padding: 3px 1.3em;
				font-size: 100%;
				box-shadow: 0 6px #5f005f;
			}

			#settings:active {
				position: relative;
				top: 6px;
				box-shadow: none;
			}

			#socialMedia {
				margin-top: 12px;
			}

			#instructionsToggle, #settingsToggle {
				display: none;
			}

			#instructionsBlock, #settingsBlock {
				box-sizing: border-box;
				display: inline-block;
				overflow-y: auto;
				border: 4px solid #4b4b4b;
				padding: 0.6em;
				text-align: left;
				background-color: rgba(107, 107, 107, 0.9);
				border-radius: 5px;
				position: absolute;
				height: 100%;
				margin-left: 1em;
				width: 250px;
			}

			#instructionsToggle:checked~#instructionsBlock, #settingsToggle:checked~#settingsBlock {
				display: none;
			}

			#instructionsBlock h4, #settingsBlock h4 {
				margin: 0;
				text-align: center;
				font-size: 105%;
			}

			#instructionsBlock h5, #settingsBlock h5 {
				font-size: 95%;
				margin: 1em 0 0.4em 0.5em;
			}

			#instructionsBlock ul {
				margin: 0;
				padding-left: 1.4em;
				margin-left: 0.8em;
			}

			#instructionsBlock li {
				margin: 0.2em 0;
			}

			#instructionsBlock p {
				margin-left: 1em;
			}

			#storageIcon {
				position: relative;
				top: 4px;
			}

			.selectionOutline {
				background-color: #747474;
				display: inline-block;
				position: relative;
				margin: 2.5px;
				border-radius: 6px;
			}

			.spellUnlock {
				background-color: #747474;
				border-radius: 6px;
			}

			#disconnected {
				z-index: 30;
				font-size: 300%;
				position: absolute;
				text-align: center;
				width: 100%;
				top: 10vh;
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
				-o-user-select: none;
				display: none;
			}

			#reload {
				font-size: 16px;
			}

			.settingsSection {
				margin-left: 1em;
			}

			.controlButton {
				cursor: pointer;
			}

			.controlOption {
				margin-top: 5px;
			}

			.connecting {
				background-color: #6F006F !important;
			}

			#playerCount {
				margin: 0;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div id="disconnected">Server disconnected.<div id="reload"><a href="javascript:location.reload()">Reload</a> to reconnect.</div></div>
		<div id='loading'>
			<p id='loaderText'>Loading</p>
		</div>
		<div id="mainScreen">
			<header>
				<h1>Wiziz</h1>
			</header>
			<div id='mainPane'>
				<div id='mainBlock'>
					<input type="text" id='nicknameInput' placeholder="Enter a Nickname" maxlength="15">
					<button id='playButton' class="popButton">Play</button>
					<label for="instructionsToggle" id='tutorial' class="popButton">How to Play</label>
					<label for="settingsToggle" id='settings' class="popButton">Settings</label>
					<div id="socialMedia">
						<a href="https://github.com/Flying-Toast/wiziz" id='githubLink' draggable="false" class='socialLink popButton' target="_blank"></a>
					</div>
				</div>
				<input type="checkbox" id="instructionsToggle">
				<div id="instructionsBlock">
					<h4>How to Play</h4>
					<h5>Controls</h5>
					<ul>
						<li>Move with
							<kbd>W</kbd>
							<kbd>A</kbd>
							<kbd>S</kbd>
							<kbd>D</kbd>
						</li>
						<li>Use the mouse to aim</li>
						<li>Click to cast a spell</li>
						<li>Use the scroll wheel to change your selected spell, or press
							<kbd>1</kbd>-<kbd id="invLen"></kbd>
						</li>
						<li>Press <kbd>E</kbd> or click the inventory icon (<img id='storageIcon' src="/media/images/storageIcon.png">) to open your inventory (your inventory will be empty until you fill up your hotbar).</li>
						<li>Press <kbd>H</kbd> to toggle the UI</li>
					</ul>
					<h5>Spells</h5>
					<ul>
						<li>Click on a spell in your inventory to swap it with a spell in your hotbar</li>
						<li>You can hover your cursor over any spell to see its effect</li>
					</ul>
				</div>
				<input type="checkbox" id="settingsToggle">
				<div id="settingsBlock">
					<h4>Settings</h4>
					<h5>Controls</h5>
					<div class="settingsSection" id="controlSettings"></div>
					<h5>Other</h5>
					<div class="settingsSection">
						<input type="checkbox" id="swansonBots">Joe Swanson Bots</input>
					</div>
				</div>
			</div>
			<footer>
				<a href="/credits.txt" target='_blank'>credits</a>
			</footer>
		</div>
		<div id="game">
			<canvas id='gameCanvas'></canvas>
			<div id="hud">
				<div id="storageWrapper">
					<div id="storage"></div>
				</div>
				<div id='chooseUnlockedSpellsWrapper'>
					<p id='newSpellsCaption'>New spells unlocked!</p>
					<p id='newSpellsSubcaption'>(click to choose new spell)</p>
					<div id="chooseUnlockedSpells"></div>
				</div>
				<div id='outerXp'>
					<div id="xp"></div>
				</div>
				<div id='outerHealth'>
					<div id="health"></div>
				</div>
				<div id="inventory">
					<span id='spellWrapper'></span>
				</div>
				<div id="leaderboard">
					<h4 id="leaderboardHeader">Leaderboard</h4>
					<h5 id="playerCount"><span id="numPlayers">00 players</span> online</h5>
					<ul id="leadersList"></ul>
				</div>
			</div>
		</div>
		<script>
			document.querySelector("#tutorial").addEventListener("click", function() {
				document.querySelector("#"+document.querySelector("#tutorial").attributes.for.nodeValue).click();
			});
			document.querySelector("#settings").addEventListener("click", function() {
				document.querySelector("#"+document.querySelector("#settings").attributes.for.nodeValue).click();
			});
			document.querySelector("#settings").addEventListener("click", function() {
				if (!document.querySelector("#instructionsToggle").checked) {
					document.querySelector("#instructionsToggle").checked = true;
				}
			});
			document.querySelector("#tutorial").addEventListener("click", function() {
				if (!document.querySelector("#settingsToggle").checked) {
					document.querySelector("#settingsToggle").checked = true;
				}
			});

			let popButtons = Array.from(document.querySelectorAll(".popButton"));

			for (let i = 0; i < popButtons.length; i++) {
				popButtons[i].addEventListener("mousedown", function(mouseDownEvent) {
					popButtons[i].addEventListener("click", function(e) {
						e.preventDefault();
					}, {once: true});
					window.addEventListener("mouseup", function() {
						mouseDownEvent.target.click();
					}, {once:true});
				});
			}
		</script>
		<script src="js/client.js"></script>
	</body>

</html>
